<template>
  <div class="customer-service-container">
    <!-- 左侧店铺列表 -->
    <div class="shop-list-sidebar">
      <div class="sidebar-header">
        <h2>客服中心</h2>
        <el-button icon="Search" circle size="small" class="search-btn"></el-button>
      </div>

      <div class="shop-tabs">
        <el-tabs v-model="activeTab" class="shop-tabs">
          <el-tab-pane label="正在咨询" name="consulting"></el-tab-pane>
          <el-tab-pane label="历史会话" name="history"></el-tab-pane>
          <el-tab-pane label="关注店铺" name="followed"></el-tab-pane>
        </el-tabs>
      </div>

      <el-scrollbar height="calc(100vh - 130px)">
        <div class="shop-list">
          <!-- 店铺列表项 -->
          <div
              class="shop-item"
              :class="{ active: selectedShopId === shop.id }"
              @click="selectShop(shop)"
              v-for="shop in shopList"
              :key="shop.id"
          >
            <el-avatar
                class="shop-avatar"
                :src="shop.avatar"
                :alt="shop.name"
            />
            <div class="shop-info">
              <h3 class="shop-name">{{ shop.name }}</h3>
              <p class="last-message">{{ shop.lastMessage || '暂无消息' }}</p>
            </div>
            <div class="shop-meta">
              <span class="message-time">{{ formatTime(shop.lastMessageTime) }}</span>
              <el-badge :value="shop.unreadCount" class="unread-badge" v-if="shop.unreadCount > 0" />
            </div>
          </div>
        </div>
      </el-scrollbar>
    </div>

    <!-- 右侧聊天区域 -->
    <div class="chat-area" v-if="selectedShop">
      <!-- 顶部导航栏 -->
      <el-header class="chat-header">
        <div class="header-content">
          <el-avatar
              class="shop-avatar"
              :src="selectedShop.avatar"
              :alt="selectedShop.name"
          />
          <div class="shop-info">
            <h2 class="shop-name">{{ selectedShop.name }}</h2>
            <div class="service-status">
              <span class="online-dot" v-if="selectedShop.online"></span>
              <span class="online-dot offline" v-else></span>
              <span class="status-text">{{ selectedShop.online ? '正在为您服务' : '客服离线' }}</span>
            </div>
          </div>
          <div class="header-actions">
            <el-button
                icon="Message"
                circle
                size="small"
                class="action-btn"
                title="查看消息记录"
            />
            <el-button
                icon="Phone"
                circle
                size="small"
                class="action-btn"
                title="语音通话"
                :disabled="!selectedShop.online"
            />
            <el-button
                icon="VideoCamera"
                circle
                size="small"
                class="action-btn"
                title="视频通话"
                :disabled="!selectedShop.online"
            />
            <el-button
                icon="More"
                circle
                size="small"
                class="action-btn"
                title="更多选项"
            />
          </div>
        </div>
      </el-header>

      <!-- 主聊天区域 -->
      <el-main class="chat-main" ref="chatMain">
        <!-- 连接状态提示 -->
        <div class="connection-status" v-if="!isConnected">
          <el-alert
              title="正在连接客服..."
              type="info"
              :closable="false"
              show-icon
          />
        </div>

        <!-- 欢迎消息 -->
        <div class="welcome-message" v-if="messages.length === 0 && isConnected">
          <p>您好！欢迎咨询{{ selectedShop.name }}，我是客服{{ selectedShop.csName }}，很高兴为您服务~</p>
          <p class="message-time">{{ formatTime(new Date()) }}</p>
        </div>

        <!-- 消息列表 -->
        <div
            class="message-row"
            v-for="(msg, index) in messages"
            :key="index"
            :class="{ 'service-message': msg.sender === 'service', 'user-message': msg.sender === 'user' }"
        >
          <el-avatar
              class="message-avatar"
              :src="msg.sender === 'service' ? selectedShop.avatar : userAvatar"
              :alt="msg.sender === 'service' ? selectedShop.name : '用户'"
          />
          <div class="message-content">
            <!-- 商品卡片消息 -->
            <div class="product-card" v-if="msg.type === 'product' && msg.product">
              <img
                  :src="msg.product.image"
                  :alt="msg.product.title"
                  class="product-image"
              />
              <div class="product-info">
                <h3 class="product-title">{{ msg.product.title }}</h3>
                <p class="product-price">{{ msg.product.price }}</p>
                <div class="product-attributes">
                  <span v-for="(attr, key) in msg.product.attributes" :key="key">{{ key }}：{{ attr }}</span>
                </div>
              </div>
            </div>

            <!-- 文本消息 -->
            <p v-else>{{ msg.content }}</p>

            <p class="message-time">{{ formatTime(msg.timestamp) }}</p>
          </div>
        </div>

        <!-- 正在输入提示 -->
        <div class="typing-indicator service-message" v-if="isTyping && isConnected">
          <el-avatar
              class="message-avatar"
              :src="selectedShop.avatar"
              :alt="selectedShop.name"
          />
          <div class="typing-content">
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
          </div>
        </div>
      </el-main>

      <!-- 输入区域 -->
      <el-footer class="chat-footer">
        <div class="input-toolbar">
          <el-button
              icon="Smile"
              size="small"
              class="toolbar-btn"
              @click="showEmojiPanel = !showEmojiPanel"
          />
          <el-button
              icon="Picture"
              size="small"
              class="toolbar-btn"
              :disabled="!isConnected"
          />
          <el-upload
              class="toolbar-upload"
              action="#"
              :show-file-list="false"
              :disabled="!isConnected"
          >
            <el-button
                icon="Document"
                size="small"
                class="toolbar-btn"
            />
          </el-upload>
          <el-button
              icon="Microphone"
              size="small"
              class="toolbar-btn"
              :disabled="!isConnected"
          />
          <el-button
              icon="ShoppingCart"
              size="small"
              class="toolbar-btn"
              :disabled="!isConnected"
          />
        </div>

        <!-- 表情面板 -->
        <div v-if="showEmojiPanel" class="emoji-panel">
          <div class="emoji-category">
            <span class="category-item active">常用</span>
            <span class="category-item">表情</span>
            <span class="category-item">手势</span>
            <span class="category-item">符号</span>
          </div>
          <div class="emoji-list">
            <span class="emoji-item" @click="addEmoji('😀')">😀</span>
            <span class="emoji-item" @click="addEmoji('😂')">😂</span>
            <span class="emoji-item" @click="addEmoji('😊')">😊</span>
            <span class="emoji-item" @click="addEmoji('👍')">👍</span>
            <span class="emoji-item" @click="addEmoji('🙏')">🙏</span>
            <span class="emoji-item" @click="addEmoji('❓')">❓</span>
            <span class="emoji-item" @click="addEmoji('❗')">❗</span>
            <span class="emoji-item" @click="addEmoji('🎉')">🎉</span>
            <span class="emoji-item" @click="addEmoji('❤️')">❤️</span>
            <span class="emoji-item" @click="addEmoji('🔥')">🔥</span>
            <span class="emoji-item" @click="addEmoji('🥰')">🥰</span>
            <span class="emoji-item" @click="addEmoji('🤔')">🤔</span>
            <span class="emoji-item" @click="addEmoji('😥')">😥</span>
            <span class="emoji-item" @click="addEmoji('😱')">😱</span>
            <span class="emoji-item" @click="addEmoji('👏')">👏</span>
            <span class="emoji-item" @click="addEmoji('💯')">💯</span>
            <span class="emoji-item" @click="addEmoji('🎁')">🎁</span>
            <span class="emoji-item" @click="addEmoji('🎈')">🎈</span>
            <span class="emoji-item" @click="addEmoji('🎊')">🎊</span>
            <span class="emoji-item" @click="addEmoji('💪')">💪</span>
          </div>
        </div>

        <div class="input-area">
          <el-input
              v-model="message"
              type="textarea"
              :rows="4"
              placeholder="请输入您想咨询的问题..."
              class="message-input"
              @keyup.enter.native="sendMessage"
              :disabled="!isConnected"
          />
          <el-button
              type="primary"
              class="send-btn"
              @click="sendMessage"
              :disabled="!isConnected || !message.trim()"
          >
            发送
          </el-button>
        </div>

        <div class="quick-replies">
          <span
              class="quick-reply-item"
              @click="useQuickReply('什么时候发货？')"
              :disabled="!isConnected"
          >
            什么时候发货？
          </span>
          <span
              class="quick-reply-item"
              @click="useQuickReply('能优惠吗？')"
              :disabled="!isConnected"
          >
            能优惠吗？
          </span>
          <span
              class="quick-reply-item"
              @click="useQuickReply('支持7天无理由退货吗？')"
              :disabled="!isConnected"
          >
            支持7天无理由退货吗？
          </span>
          <span
              class="quick-reply-item"
              @click="useQuickReply('有其他颜色吗？')"
              :disabled="!isConnected"
          >
            有其他颜色吗？
          </span>
        </div>
      </el-footer>
    </div>

    <!-- 未选择店铺时的提示 -->
    <div class="no-selection" v-else>
      <div class="no-selection-content">
        <el-icon class="chat-icon"><Message /></el-icon>
        <p>请选择一个店铺开始聊天</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import {ref, onMounted, watch, nextTick, onUnmounted} from 'vue';
import { AuthService } from '@/service/auth.ts';
import axios from 'axios';
import { ElMessage } from 'element-plus';
import { Message } from '@element-plus/icons-vue';
import KefuWebSocketService from '@/websocket/service.js';


// 响应式数据
const message = ref('');
const showEmojiPanel = ref(false);
const activeTab = ref('consulting');
const selectedShopId = ref(null);
const selectedShop = ref(null);
const isConnected = ref(false);
const isTyping = ref(false);
const chatMain = ref(null);
const userAvatar = 'https://picsum.photos/id/91/200/200';

const authService = new AuthService();
const userId = ref(authService.getUserId()); // 获取当前用户ID
const shopList = ref([]); // 店铺列表
const messages = ref([]); // 当前聊天消息列表

// 格式化时间显示
// 格式化时间显示
const formatTime = (date) => {
  if (!date) return '';

  // 确保 date 是一个有效的 Date 对象
  const msgDate = new Date(date);
  if (isNaN(msgDate.getTime())) {
    return '';
  }

  // 使用 toLocaleTimeString 方法格式化时间
  return msgDate.toLocaleTimeString();
};


// 获取店铺列表
const getShopList = async () => {
  try {
    const response = await fetch(`/api/KeFu/${userId.value}`);
    const data = await response.json();
    console.log('data', data);

    // 格式化店铺数据
    shopList.value = data.map(shop => ({
      id: shop.shopId,
      shopUserId: shop.shopUserId,
      name: shop.shopName,
      avatar: shop.logo || "vite.svg",
      csName: shop.csName || '客服人员',
      online: shop.online || false,
      lastMessage: shop.lastMessage || '',
      lastMessageTime: shop.lastMessageTime || new Date(),
      unreadCount: shop.unreadCount || 0
    }));
  } catch (error) {
    console.error('获取店铺列表失败:', error);
    ElMessage.error('获取店铺列表失败，请稍后重试');
  }
};

// 加载历史消息
const loadHistoryMessages = async (shopId,shopUserId) => {
  try {
    // 获取用户发送给店铺的消息
    const { data: sentMessages } = await axios(`/api/KeFu/getMessagesByfszId/${userId.value}/${shopUserId}/${shopId}`);
    console.log(shopId);
    console.log('sentMessages', sentMessages);

    // 获取店铺发送给用户的消息
    const { data: receivedMessages } = await axios(`/api/KeFu/getMessagesByfszId/${shopUserId}/${userId.value}/${shopId}`);

    console.log('receivedMessages', receivedMessages);
    // 合并并处理消息
    const allMessages = [...sentMessages, ...receivedMessages]
        .map(msg => ({
          id: msg.id,
          sender: msg.fszId === userId.value ? 'user' : 'service',
          content: msg.text,
          timestamp: msg.time,
          type: 'text'
        }))
        .sort((a, b) => new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime());

    messages.value = allMessages;
    scrollToBottom();
  } catch (error) {
    console.error('加载历史消息失败:', error);
    ElMessage.error('加载聊天记录失败，请稍后重试');
  }
};

// 选择店铺
const selectShop = async (shop) => {
  // 更新选中的店铺
  selectedShopId.value = shop.id;
  selectedShop.value = shop;

  // 加载该店铺的消息记录
  await loadHistoryMessages(shop.id,shop.shopUserId);

  // 重置未读消息数
  // if (shop.unreadCount > 0) {
  //   shop.unreadCount = 0;
  //   // 调用接口更新未读状态
  //   try {
  //     await axios.put(`/api/chat/read/${userId.value}/${shop.id}`);
  //   } catch (error) {
  //     console.error('更新已读状态失败:', error);
  //   }
  // }

  // 标记为已连接
  isConnected.value = true;
};

// 添加表情到输入框
const addEmoji = (emoji) => {
  message.value += emoji;
};

// 使用快捷回复
const useQuickReply = (text) => {
  message.value = text;
  sendMessage();
};

// 发送消息
const sendMessage = async () => {
  if (!isConnected.value || !message.value.trim() || !selectedShop.value) {
    return;
  }

  // 构造消息对象
  const newMessage = {
    fszId: userId.value,
    jszId: selectedShop.value.id,
    shopUserId: selectedShop.value.shopUserId,
    text: message.value,
    time: new Date().toISOString().replace('T', ' ').substring(0, 19),
    sender: 'user',
    content: message.value,
    timestamp: new Date(),
    type: 'text'
  };

  KefuWebSocketService.sendMessageInKefu(selectedShop.value.shopUserId,selectedShop.value.id, message.value);
  messages.value.push(newMessage);
}
      // 更新店铺的最后一条消息



// 滚动到最新消息
const scrollToBottom = () => {
  nextTick(() => {
    if (chatMain.value) {
      chatMain.value.scrollTop = chatMain.value.scrollHeight;
    }
  });
};

// 组件挂载时初始化
onMounted(() => {
  // 注册所有必要的事件监听器
  KefuWebSocketService.on('connect', () => {
    isConnected.value = true;
    console.log('WebSocket连接成功');
  });

  KefuWebSocketService.on('disconnect', () => {
    isConnected.value = false;
    console.log('WebSocket连接断开');
  });

  KefuWebSocketService.on('error', (error) => {
    console.error('WebSocket错误:', error);
  });

  // 关键：改进消息监听器
  KefuWebSocketService.on('message', handleIncomingMessage);

  // 连接WebSocket
  KefuWebSocketService.connect(userId.value);

  // 获取店铺列表
  getShopList().then(() => {
    // 默认选择第一个店铺
    if (shopList.value.length > 0) {
      selectShop(shopList.value[0]);
    }
  });
});

// 处理接收到的消息 - 改进版本
const handleIncomingMessage = (data) => {
  try {
    console.log('收到WebSocket消息:', data);

    // 处理不同类型的消息数据
    let messageContent = '';
    let senderId = null;

    if (typeof data === 'string') {
      // 如果是字符串，尝试解析为JSON
      try {
        const parsedData = JSON.parse(data);
        messageContent = parsedData.content || parsedData.text || data;
        senderId = parsedData.sender || parsedData.fszId;
      } catch (e) {
        // 如果解析失败，当作普通文本处理
        messageContent = data;
      }
    } else if (typeof data === 'object' && data !== null) {
      // 如果是对象
      messageContent = data.content || data.text || JSON.stringify(data);
      senderId = data.sender || data.fszId || data.jszId;
    } else {
      // 其他情况转换为字符串
      messageContent = String(data);
    }

    // 只保留冒号后的消息内容
    messageContent = messageContent.split(':').slice(1).join(':').trim();

    // 构造消息对象
    const newMessage = {
      id: Date.now(),
      sender: 'service', // 来自客服的消息
      content: messageContent,
      timestamp: new Date(),
      type: 'text'
    };

    // 添加到消息列表（如果当前选中了店铺）
    if (selectedShop.value) {
      messages.value.push(newMessage);
    }

    // 更新店铺列表中的最后消息（如果能找到对应店铺）
    if (senderId) {
      const shop = shopList.value.find(s => s.id == senderId);
      if (shop) {
        shop.lastMessage = messageContent;
        shop.lastMessageTime = new Date();

        // 如果不是当前选中的店铺，增加未读计数
        if (!selectedShop.value || selectedShop.value.id != senderId) {
          shop.unreadCount = (shop.unreadCount || 0) + 1;
        }
      }
    }

  } catch (error) {
    console.error('处理接收到的消息时出错:', error);
  }
};


// 组件卸载前清理监听器
onUnmounted(() => {
  KefuWebSocketService.off('connect');
  KefuWebSocketService.off('disconnect');
  KefuWebSocketService.off('error');
  KefuWebSocketService.off('message');
});

// 监听消息变化，自动滚动到底部
watch(messages, () => {
  scrollToBottom();
});
</script>

<style scoped>
.customer-service-container {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

/* 左侧店铺列表样式 */
.shop-list-sidebar {
  width: 320px;
  background-color: #ffffff;
  border-right: 1px solid #e5e7eb;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.sidebar-header {
  padding: 15px 20px;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sidebar-header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
}

.search-btn {
  color: #666;
  background-color: #f5f5f5;
  border: none;
}

.shop-tabs {
  padding: 0 10px;
}

.shop-list {
  flex: 1;
  overflow-y: auto;
}

.shop-item {
  padding: 12px 20px;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: background-color 0.2s;
  border-bottom: 1px solid #f5f5f5;
}

.shop-item:hover {
  background-color: #f9fafb;
}

.shop-item.active {
  background-color: #f0f7ff;
  border-left: 3px solid #4096ff;
}

.shop-item .shop-avatar {
  width: 50px;
  height: 50px;
  margin-right: 12px;
}

.shop-item .shop-info {
  flex: 1;
  min-width: 0;
}

.shop-item .shop-name {
  font-size: 16px;
  margin: 0 0 5px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shop-item .last-message {
  font-size: 13px;
  color: #666;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shop-item .shop-meta {
  text-align: right;
  min-width: 60px;
}

.shop-item .message-time {
  font-size: 12px;
  color: #999;
  display: block;
  margin-bottom: 5px;
}

.unread-badge {
  background-color: #f56c6c;
}

/* 右侧聊天区域样式 - 固定大小 */
.chat-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 600px; /* 固定最小宽度 */
  max-width: calc(100vw - 320px); /* 最大宽度不超过屏幕减去左侧宽度 */
}

/* 未选择店铺时的提示 */
.no-selection {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f7fa;
}

.no-selection-content {
  text-align: center;
  color: #999;
}

.chat-icon {
  font-size: 48px;
  margin-bottom: 15px;
}

/* 头部样式 */
.chat-header {
  background-color: #ffffff;
  border-bottom: 1px solid #e5e7eb;
  padding: 0 20px;
  height: 70px !important;
}

.header-content {
  display: flex;
  align-items: center;
  height: 100%;
  justify-content: space-between;
}

.chat-header .shop-avatar {
  width: 48px;
  height: 48px;
  margin-right: 15px;
}

.shop-info {
  flex: 1;
}

.shop-name {
  font-size: 16px;
  font-weight: 500;
  margin: 0 0 5px 0;
}

.service-status {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #666;
}

.online-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #4cd964;
  margin-right: 5px;
}

.online-dot.offline {
  background-color: #999;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.action-btn {
  color: #666;
  background-color: #f5f5f5;
  border: none;
  transition: all 0.2s;
}

.action-btn:hover {
  background-color: #e0e0e0;
  color: #333;
}

.action-btn:disabled {
  color: #ccc;
  background-color: #f5f5f5;
  cursor: not-allowed;
}

/* 主聊天区域样式 */
.chat-main {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  background-color: #f5f7fa;
  background-image:
      linear-gradient(rgba(245, 247, 250, 0.8) 1px, transparent 1px),
      linear-gradient(90deg, rgba(245, 247, 250, 0.8) 1px, transparent 1px);
  background-size: 20px 20px;
}

.connection-status {
  margin-bottom: 15px;
}

.welcome-message {
  background-color: #e5f3ff;
  color: #333;
  padding: 10px 15px;
  border-radius: 10px;
  margin: 0 auto 20px;
  max-width: 80%;
  text-align: center;
  font-size: 14px;
  position: relative;
}

.welcome-message::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 8px 8px 0;
  border-style: solid;
  border-color: #e5f3ff transparent transparent;
}

.message-time {
  font-size: 12px;
  color: #999;
  margin-top: 5px;
  text-align: right;
}

.message-row {
  display: flex;
  margin-bottom: 20px;
  max-width: 80%;
}

.service-message {
  align-self: flex-start;
}

.user-message {
  margin-left: auto;
  flex-direction: row-reverse;
  align-self: flex-end;
}

.message-avatar {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.service-message .message-avatar {
  margin-right: 10px;
}

.user-message .message-avatar {
  margin-left: 10px;
}

.message-content {
  max-width: calc(100% - 50px);
}

.service-message .message-content p {
  background-color: #ffffff;
  color: #333;
  padding: 10px 15px;
  border-radius: 10px;
  margin: 0 0 5px 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.user-message .message-content p {
  background-color: #4096ff;
  color: #ffffff;
  padding: 10px 15px;
  border-radius: 10px;
  margin: 0 0 5px 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* 商品卡片样式 */
.product-card {
  background-color: #ffffff;
  border-radius: 10px;
  padding: 10px;
  display: flex;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  margin-bottom: 5px;
}

.product-image {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 5px;
  margin-right: 10px;
}

.product-info {
  flex: 1;
}

.product-title {
  font-size: 14px;
  margin: 0 0 5px 0;
  color: #333;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-price {
  font-size: 16px;
  color: #f56c6c;
  margin: 5px 0;
  font-weight: 500;
}

.product-attributes {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  font-size: 12px;
  color: #666;
}

/* 正在输入提示 */
.typing-indicator {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.typing-content {
  background-color: #ffffff;
  padding: 10px 15px;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #999;
  margin: 0 2px;
  animation: typing 1.4s infinite ease-in-out both;
}

.dot:nth-child(1) { animation-delay: -0.32s; }
.dot:nth-child(2) { animation-delay: -0.16s; }

@keyframes typing {
  0%, 80%, 100% { transform: scale(0); }
  40% { transform: scale(1); }
}

/* 底部输入区域样式 */
.chat-footer {
  background-color: #ffffff;
  border-top: 1px solid #e5e7eb;
  padding: 10px 20px;
  height: auto !important;
}

.input-toolbar {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
  padding-left: 5px;
}

.toolbar-btn {
  color: #666;
  background-color: transparent;
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.toolbar-btn:hover {
  background-color: #f0f0f0;
  color: #333;
}

.toolbar-btn:disabled {
  color: #ccc;
  cursor: not-allowed;
}

.toolbar-upload {
  display: inline-block;
}

/* 表情面板 */
.emoji-panel {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  margin-bottom: 10px;
  padding: 10px;
}

.emoji-category {
  display: flex;
  border-bottom: 1px solid #eee;
  padding-bottom: 5px;
  margin-bottom: 10px;
}

.category-item {
  padding: 5px 10px;
  font-size: 13px;
  color: #666;
  cursor: pointer;
  margin-right: 5px;
  border-radius: 4px;
}

.category-item.active {
  background-color: #e5f3ff;
  color: #4096ff;
}

.emoji-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.emoji-item {
  font-size: 20px;
  cursor: pointer;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.2s;
}

.emoji-item:hover {
  background-color: #f0f0f0;
}

.input-area {
  display: flex;
  gap: 10px;
}

.message-input {
  flex: 1;
  border-radius: 8px;
  resize: none;
}

.message-input:disabled {
  background-color: #f5f5f5;
  cursor: not-allowed;
}

.send-btn {
  width: 80px;
  height: 100%;
  align-self: flex-end;
  border-radius: 8px;
  padding: 12px 0;
}

.send-btn:disabled {
  background-color: #a0cfff;
  border-color: #a0cfff;
  cursor: not-allowed;
}

/* 快捷回复 */
.quick-replies {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.quick-reply-item {
  background-color: #f5f7fa;
  color: #666;
  padding: 5px 12px;
  border-radius: 15px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
}

.quick-reply-item:hover {
  background-color: #e5e7eb;
  color: #333;
}

.quick-reply-item:disabled {
  background-color: #f5f5f5;
  color: #ccc;
  cursor: not-allowed;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .shop-list-sidebar {
    width: 100%;
    position: absolute;
    z-index: 100;
    height: 100%;
    transform: translateX(-100%);
    transition: transform 0.3s;
  }

  .shop-list-sidebar.show {
    transform: translateX(0);
  }

  .chat-area {
    width: 100%;
    min-width: auto;
    max-width: 100%;
  }
}
</style>
